<script setup>
import { store } from '@/store';
import { onMounted, ref } from 'vue';

// 点击假期信息卡片触发的方法，用于页面跳转
const goToPage2 = () => {
  if (!store.applicationStatus) {
    // 使用to跳转方式
    uni.navigateTo({
      url: '/pages/students/page2'
    });
  }
};

// 撤销申请
const cancelApplication = () => {
  uni.showModal({
    title: '确认撤销',
    content: `确定要撤销本次${store.applicationType === 'leave' ? '离校' : '留校'}申请吗？`,
    success: (res) => {
      if (res.confirm) {
        store.updateStatus('cancelled');
        uni.showToast({
          title: '已撤销申请',
          icon: 'success',
          duration: 1500
        });
      }
    }
  });
};

// 定义底部导航项配置
const tabItems = [
  {
    name: '假期批次',
    icon: '/static/tab1.png',
    url: '/pages/students/page1'
  },
  {
    name: '留校签到',
    icon: '/static/tab2.png',
    url: '/pages/students/page5'
  },
  {
    name: '更多功能',
    icon: '/static/tab3.png',
    url: '/pages/students/page6'
  }
];

// 当前激活的tab索引
const activeIndex = ref(0);

// 页面加载时确定当前激活的tab
onMounted(() => {
  // 获取当前页面路径
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const currentUrl = currentPage.route;

  // 匹配当前激活的tab
  const index = tabItems.findIndex(item => item.url.includes(currentUrl));
  if (index !== -1) {
    activeIndex.value = index;
  }
});

// 处理tab点击事件，使用to跳转
const handleTabClick = (index, url) => {
  // 如果点击的是当前激活的tab，不执行跳转
  if (index === activeIndex.value) return;

  // 更新激活状态
  activeIndex.value = index;

  // 使用uni.navigateTo进行跳转
  uni.navigateTo({
    url: url
  });
};
</script>

<template>
  <!-- 页面整体容器 -->
  <view class="holiday-batch-page">
    <!-- 假期信息卡片，添加点击事件 -->
    <view class="holiday-card" @click="goToPage2">
      <view class="card-header">
        <view class="blue-line"></view>
        <text class="holiday-name">2024年春节放假</text>
      </view>
      <view class="card-content">
        <text class="info-item">假期开始时间：2023/11/16 00:00:00</text>
        <text class="info-item">假期结束时间：2023/11/17 00:00:00</text>
        <text class="info-item">假期时长：1天</text>
      </view>
      <view class="card-divider"></view>

      <!-- 状态显示区域 -->
      <view class="status-container">
        <text class="apply-tip">
          {{ store.applicationStatus === 'processing'
            ? (store.applicationType === 'leave' ? '离校申请审批中' : '留校申请审批中')
            : store.applicationStatus === 'cancelled'
                ? (store.applicationType === 'leave' ? '离校申请已撤销' : '留校申请已撤销')
                : '28人已申请，请尽快申请' }}
        </text>

        <!-- 审批中状态显示撤销按钮 -->
        <text
            class="cancel-btn"
            @click.stop="cancelApplication"
            v-if="store.applicationStatus === 'processing'"
        >
          撤销申请
        </text>
      </view>
    </view>

    <!-- 底部 tabbar -->
    <view class="tabbar">
      <view
          class="tab-item"
          :class="{ active: index === activeIndex }"
          v-for="(item, index) in tabItems"
          :key="index"
          @click="handleTabClick(index, item.url)"
      >
        <image :src="item.icon" class="tab-icon" />
        <text class="tab-text">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
/* 页面整体 */
.holiday-batch-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 60px; /* 为底部tabbar留出空间 */
}

/* 假期信息卡片 */
.holiday-card {
  background-color: #fff;
  border-radius: 5px;
  margin: 15px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  margin-top: 20px;
}
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.blue-line {
  width: 4px;
  height: 20px;
  background-color: #409eff;
  margin-right: 10px;
}
.holiday-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.card-content {
  margin-bottom: 15px;
}
.info-item {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}
.card-divider {
  height: 1px;
  background-color: #e5e5e5;
  margin: 15px 0;
}

/* 状态显示区域样式 */
.status-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.apply-tip {
  font-size: 14px;
  color: #409eff;
}
.cancel-btn {
  font-size: 14px;
  color: #f56c6c;
  cursor: pointer;
  padding: 5px 10px;
}

/* 底部 tabbar */
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tab-item.active .tab-text {
  color: #409eff;
}
.tab-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.tab-text {
  font-size: 12px;
  color: #999;
}
</style>
